<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="box">
    <!-- 走马灯 -->
    <div class="block">
      <el-carousel trigger="click" height="800px">
        <el-carousel-item v-for="item in imgList" :key="item.id">
          <img :src="item.idView" class="idView" />
        </el-carousel-item>
      </el-carousel>
      <el-form>
        <el-form-item>
          <div class="box-form">
            <el-input placeholder="请输入搜索地区" v-model="region"> </el-input>
            <i class="el-icon-search search" @click="are"></i>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getPropetyList } from '@/api/propety'
export default {
  data () {
    return {
      imgList: [
        { id: 0, idView: require('../../assets/components/1.png') },
        { id: 1, idView: require('../../assets/components/2.jpg') },
        { id: 2, idView: require('../../assets/components/4.jpg') }
      ],
      region: '',
      shujuList: []
    }
  },
  methods: {
    // 首页搜索
    async are () {
      if (this.region) {
        const res = await getPropetyList({
          title_contains: this.region
        })
        console.log(res)
        if (res.data.length !== 0) {
          this.$store.commit('getclassifyList', res.data)
          this.$router.push('/EstateList/ss')
          this.$message.success('搜索成功')
        } else {
          this.$message.warning('无数据请重试')
        }
      } else {
        this.$message.warning('请输入查找地区')
      }
    }
  }
}
</script>

<style lang='scss' scoped>
body {
  margin: 0;
}
::v-deep el-main {
  padding: 0;
}
.box {
  height: 800px;
  width: 100%;
  .block {
    position: relative;
    // width: 99.1145vw;
    .el-form {
      opacity: 0.9;
      width: 300px;
      height: 100px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 3;
      .box-form {
        // display: flex;
        .search {
          width: 50px;
          height: 50px;
          line-height: 50px;
          background-color: #fff;
          border-radius: 50%;
          font-size: 20px;
          margin-top: 30px;
        }
      }
    }
    .idView {
      width: 100%;
      height: 100%;
    }

    .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n + 1) {
      background-color: #d3dce6;
    }
  }
}
</style>
